<template>
  <div>
    <van-nav-bar title="中央文案">
      <img
        src="../../assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
        fixed
      />
    </van-nav-bar>
    <div class="copy">
      <div
        class="copy-item"
        v-for="(item, index) in copyWritingList"
        :key="item.id"
      >
        <div>
          <h6>{{ timestampToTimeYMD(item.update_time) }}</h6>
          {{ timestampToTimeHMS(item.update_time) }}
        </div>
        <div class="copy-item-right">
          <div>
            {{ item.content }}
          </div>

          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(imgItem, i) in item.img_url" :key="i">
              <van-image
                :src="imgItem"
                width="100"
                height="60"
                @click="getImg(item.img_url, i)"
              />
            </van-grid-item>
          </van-grid>
          <div class="copy-writer">
            <div class="btn" @click="downs()">
              <img
                src="../../assets/image/icon_all_save.png"
                width="15"
                height="15"
                alt=""
              />
              <p>保存图片</p>
            </div>
            <div
              class="btn"
              :data-clipboard-text="item.content"
              :class="'cobyOrderSn' + index"
              @click="getxtClick(index)"
            >
              <img
                src="../../assets/image/icon_all_copy.png"
                width="15"
                height="15"
                alt=""
              />
              <p>复制文案</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { stringify } from "qs";
import { ImagePreview } from "vant";
import { queryCopyWritingInfoApi } from "../../network/ApiServe";
export default {
  data() {
    return {
      copyWritingList: [],
    };
  },

  created() {
    this.brandId = localStorage.getItem("brandId");
  },
  mounted() {
    this.getCopyWritingInfo();
  },
  methods: {
    getImg(imgs, index) {
      console.log("imgs", imgs);
      ImagePreview({
        images: imgs,
        showIndex: true,
        loop: false,
        startPosition: index,
        closeable: true,
      });
    },
    leftClick() {
      this.$router.back(-1);
    },
    getCopyWritingInfo() {
      //this.brandId
      queryCopyWritingInfoApi(118)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.copyWritingList = res.result;
          }
          console.log(this.copyWritingList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 将时间戳转换为时间
    timestampToTimeYMD(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      return Y + M + D;
    },
    timestampToTimeHMS(timestamp) {
      let date1 = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let h =
        (date1.getHours() < 10 ? "0" + date1.getHours() : date1.getHours()) +
        ":";
      let m =
        date1.getMinutes() < 10 ? "0" + date1.getMinutes() : date1.getMinutes();

      return h + m;
    },
    getxtClick(index) {
      let _this = this;
      let clipboard = new this.clipboard(".cobyOrderSn" + index);
      clipboard.on("success", function () {
        _this.$toast("文案已复制到粘贴板");
        console.log("00");
      });
      clipboard.on("error", function () {
        _this.$toast("复制失败，请联系管理人员");
        console.log("11");
      });
      console.log("22");
    },
    copyLink() {
      let _this = this;
      let clipboard = new this.clipboard(".cobyOrderSn");
      clipboard.on("success", function () {
        _this.$toast("复制成功");
      });
      clipboard.on("error", function () {
        _this.$toast("复制失败");
      });
    },
    // 1111
    downs() {
      var alink = document.createElement(".van-image");
      alink.href = this.shop.shoppic_url;
      alink.download = "pic"; //图片名
      alink.click();
    },

    downs() {
      this.downloadIamge(this.pic.url, "pic");
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
  },
};
</script>
<style scoped>
.copy {
  /* margin-top: 46px; */
  font-size: 15px;
}
h6 {
  font-size: 18px;
}
.copy-item {
  display: flex;
  background-color: #fff;
  padding: 15px;
}
.copy-item-right {
  flex: 1;
  margin-left: 15px;
}
.van-grid-item {
  position: relative;
  box-sizing: border-box;
  height: 76px;
}
.van-button {
  height: 30px;
  line-height: 30px;
  display: inline-block;
}
.van-button img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.btn {
  display: flex;
  border: 1px solid #666;
  text-align: center;
  width: 87px;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin: 5px;
  padding: 3px;
}
.copy-writer {
  justify-content: flex-end;
  display: flex;
}
.copy-writer p {
  margin-left: 3px;
}
</style>